<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%String path = request.getContextPath(); %>
<!DOCTYPE HTML>
<script src="<%=path %>/front/js/jquery-3.5.0.min.js"></script>
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Home</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/verify.slider.css" />
	<!-- *****************************************新的弹框样式*********************************** -->
	<link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css">
<script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script>
	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Themify Icons-->
	<link rel="stylesheet" href="css/themify-icons.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="css/magnific-popup.css">

	<!-- Owl Carousel  -->
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="css/login.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	</head>
	<body>
		
	<!-- 获得上一页的信息 -->

	
	<header id="gtco-header" class="gtco-cover" role="banner" style="background-image: url(images/login.jpg)">
		<div class="overlay"></div>
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-12 col-md-offset-0 text-left">
					<div class="row row-mt-15em">
						<div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
							<span class="intro-text-small">Welcome to Splash</span>
							<h1>爱下厨，美食分享</h1>	
						</div>
						<div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
							<div class="form-wrap">
								<div class="tab">
									<ul class="tab-menu">
										<li class="active gtco-first"><a href="#" data-tab="signup">注册</a></li>
										<li class="gtco-second"><a href="#" data-tab="login">登录</a></li>
									</ul>
									<div class="tab-content">
										<div class="tab-content-inner active" data-content="signup">
											
											
											
							<!-- 注册   -->				
											<form action="<%=path %>/UserinfoServlet?action=registe" enctype="multipart/form-data" method="post" id="myform">
												<div class="row form-group">
													<div class="col-md-12">
														用户名
														<input type="text" class="form-control" id="username" name="username"><span id="usernameRs"></span>
													</div>
												</div>
												<div class="row form-group">
													<div class="col-md-12">
														密码
														<input type="password" class="form-control" id="userpass" name="userpass"><span id="userpassRs"></span>
													</div>
												</div>
												<div class="row form-group">
													<div class="col-md-12">
														确认密码
														<input type="password" class="form-control" id="userpass2" name="userpass2"><span id="userpass2Rs"></span>
													</div>
												</div>
												
												<div class="row form-group">
													<div class="col-md-12">
														邮箱
														<input type="text" class="form-control" id="useremail" name="useremail"><span id="useremailRs"></span>
													</div>
												</div>
												
												<div class="row form-group">
													<div class="col-md-12">
														
														头像<input style="width:40% "  type="file" class="form-control" id="userface" name="userface"  >
													</div>
												</div>
												
												<div class="row form-group">
													<div class="col-md-12">
														<label for="password2">性别:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio"name="sex" value="男" checked>&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio"name="sex" value="女">&nbsp;&nbsp;女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														
													</div>
												</div>

												<div class="row form-group">
													<div class="col-md-12">
														<input type="submit" class="btn btn-primary" value="注册">
													</div>
												</div>
											</form>	
										</div>
						<!-- 登录表单 -->
										<div class="tab-content-inner" data-content="login">
											<form action="<%=path %>/UserinfoServlet?action=checkExist" id="loginForm" method="post">
												<div class="row form-group">
													<div class="col-md-12">
														<label for="username">用户名</label>
														<input type="text" class="form-control" name="loginname" id="loginname"><span id="loginnameRs"></span>
													</div>
												</div>
												<div class="row form-group">
													<div class="col-md-12">
														<label for="password">密码</label>
														<input type="password" class="form-control" name="loginpass" id="loginpass">
														<%String action=request.getParameter("action");%>
														<%String errMes=request.getParameter("errMes"); %>
<%if("1".equals(errMes)){%>
	
	<font color="red">用户名或者密码错误</font>
	<%
} %>
<%if("2".equals(errMes)){%>
	
	<font color="red">您被禁止登陆</font>
	<%
} %>
<%if("succeed".equals(action)){%>
		
	<font color="green">修改密码成功请重新登录</font>
		
	<%	
	}
	%>
													</div>
												</div>
												
												<div class="row form-group">
													<div class="col-md-12">
														<label for="yanzhengma">请滑动</label>
		
														<div id="verify_type1"></div>
													</div>
												</div>

												<div class="row form-group">
													<div class="col-md-12">
														<input type="submit" class="btn btn-primary" value="登录">
													</div>
												</div>
											</form>	
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
							
					
				</div>
			
	</header>
	


	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Carousel -->
	<script src="js/owl.carousel.min.js"></script>
	<!-- countTo -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Magnific Popup -->
	<script src="js/jquery.magnific-popup.min.js"></script>
	<script src="js/magnific-popup-options.js"></script>
	<!-- Main -->
	<script src="js/main.js"></script>

	</body>
	
	<script type="text/javascript" src="js/verify.slider.js" ></script>
<!-- 注册 -->
                    

</script>
<!-- 用户名验证 -->
<script>
//给用户名添加验证事件
$(function(){
	$("#username").blur(checkUserName);
});
//用户名验证事件
function checkUserName(){
	var username=$("#username").val();
	
	//验证用户名是否合法 5-15个合法字符
	var reg=/^\w{5,15}$/;
	var flag=reg.test(username); 
	if(flag){//合法后 再验证是否重复 通过ajax和数据库存在的用户名比较
		var f=false;
		
		$.ajax({
			url:"<%=path %>/UserinfoServlet",
			type:"post",
			async:false,
			data:{username:username,action:"CheckRename"},
			success:function(mes){//接收servlet返回的mes值 0是存在 1是不存在
				if(mes==0){//0不存在
					$("#usernameRs").html("√");
					$("#usernameRs").css("color","green");
					f= true;
				}
				if(mes==1){//1存在
					
					$("#usernameRs").html("x");
					$("#usernameRs").css("color","red");
					f= false;
				}	
			}
		});
		return f;
	}
	else{//用户名不合法
		$("#usernameRs").html("x");
		$("#usernameRs").css("color","red");
		return false;
	}
}
</script>
<script>
//密码验证事件 密码框失去焦点事件
$(function(){
	$("#userpass").blur(checkUserPass);
});
function checkUserPass(){
	var userpass=$("#userpass").val();
	var reg=/^\w{5,15}$/;
	var flag=reg.test(userpass);
	if(flag){
		$("#userpassRs").html("√");
		$("#userpassRs").css("color","green");
		return true;
	}
	else{
		$("#userpassRs").html("x");
		$("#userpassRs").css("color","red");
		return false;
	}
}

</script>
<!-- 邮箱验证 -->
<script>
$(function(){
	$("#useremail").blur(checkUserEmail);
});
function checkUserEmail(){
	var useremail =$("#useremail").val();
	var reg=/^\w+(\.\w+)*@\w+\.\w+(\.\w+)?$/;
	var flag=reg.test(useremail);
	if(flag){
		$("#useremailRs").html("√");
		$("#useremailRs").css("color","green");
		return true;
	}
	else{
		$("#useremailRs").html("x");
		$("#useremailRs").css("color","red");
		return false;
	}
}
</script>
<!-- 密码框验证 -->
<script>
$(function(){
	$("#userpass2").blur(checkUserPassRe);
	
});
function checkUserPassRe(){
	var userpass=$("#userpass").val();
	var userpass2=$("#userpass2").val();
	if(userpass2==userpass){
		$("#userpass2Rs").html("√");
		$("#userpass2Rs").css("color","green");
		return true;
	}
	else{
		$("#userpass2Rs").html("x");
		$("#userpass2Rs").css("color","red");
		return false;
	}
}
</script>
<!-- 表单提交验证 -->
<script>
$(function(){
	$("#myform").submit(check);
});
function check(){
	//调用 验证的方法们
	var f1=checkUserName();
	var f2=checkUserPass();
	var f3=checkUserPassRe();
	var f4=checkUserEmail();
	
	return f1&&f2&&f3&&f4;
};
</script>

</html>
<!-- 登录的表单验证 -->
<script>
<!-- 滑块验证 -->

var f=false;
$(function checkHuaDong(){
	
	var type1 = document.getElementById('verify_type1');
	verifyFun.bar({
		dom:type1,		// dom对象
		width:'200',	// 盒子宽
		height:'40',	// 盒子高
		hsize:'16',		// 提示字体大小
		size:'20',		// 滑动块箭头字体大小
		diff:5,			// 误差值
		success:function() {		
			swal('验证成功，请登录！');			
			f=true;
		},
		error:function() {
			swal('验证失败,请重新验证！');
			f=false;
		}
		
		
	});
	return f;
});
</script>
<!-- 登录验证 -->

<script>
$(function(){
	
	$("#loginForm").submit(function(){
		return f;
	});
	
});

</script>